<template>
  <div class="page-min">
    <el-form ref="form"   label-width="90px" :inline="true">
      <el-form-item label="项目:" >
        <el-select size="mini"
                   clearable
                   v-model="form.projectId"
                   placeholder="请选择">
          <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间:" >
        <el-input v-model="form.startDate" placeholder="开始时间/2005-5-25"></el-input>

      </el-form-item>
      <el-form-item label="">
        <el-input v-model="form.endDate" placeholder="结束时间/2005-5-25"></el-input>
      </el-form-item>
      <el-form-item label="" prop="name" style="width:300px">
        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
            max-height="720"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            :header-cell-style="{background:'#F0F1F6',color:'#333'}"
            style="width: 100%;">
      <el-table-column
              type="index"
              label="序号">
      </el-table-column>
      <el-table-column
              prop="userName"
              label="人员名称">
      </el-table-column>
      <el-table-column
              prop="outputAmount"
              label="产值金额">
      </el-table-column>
      <el-table-column
              label="操作">
        <template slot-scope="scope">
          <el-button  @click="btnDeales(scope.row)"   type="text" size="mini">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            style="float: right; margin-right: 50px; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
    <el-dialog  :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1100px" title="详细信息">
      <save-plan :user-id="this.dialogData.userId"/>
    </el-dialog>
  </div>
</template>

<script>
  import { projectOutputValueGatherList } from "@/api/report"
  import { allList } from "@/api/report"
  import savePlan from './components/reportDetail'

  export default {
    created() {
      this.getList()
      this.getSelOpt()
    },
    components:{
      savePlan
    },
    data() {
    return {
      form:{
        projectId:'',
        projectName:'',
        startDate:'',
        endDate:'',
      },
      options:[],
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize:10,
      dialogData:{
        userId: ''
      },
      dialogVisible:false
    }
  },
    methods: {
    getList(data){
      let query = data ? data : {page:1,pageSize:10,data:{}}
      projectOutputValueGatherList(query).then((r) =>{
         if (r.code !== 200) {
           this.$message.error(r?.msg)
           this.tableData =[]
         }
         else {
           if (r.rows.length){
             this.tableData = r?.rows
             this.total = r?.total
           }else {
             this.tableData =[]
           }
         }
       })

    },
      getSelOpt() {
        // 请求下拉框数据
        allList().then((r) => {
          if (r.code !== 200) {
            this.$message.error(r?.msg)
            this.options =[]
          }
          else {
            if (r.data.length){
              this.options = r.data
            }else {
              this.options =[]
            }
          }
        })
      },
    btnQuery(){
      this.getList({
        endDate: this.form.endDate,
        projectId: this.form.projectId,
        startDate: this.form.startDate,
        })
    },
    handleSizeChange(size){
      this.pageSize = size
    },
    handleCurrentChange(current){
      this.currentPage = current
    },
    btnDeales(row){
      this.dialogData.userId = row.userId
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
</style>